<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div
      class="vc-button-list"
      :style="{gap: gap}"
    >
      <div
        v-if="compStyle['showAll']"
        class="vc-button-list-item"
        :style="getStyle({})"
        @click="changeData({})"
      >{{ allName || '全部' }}</div>
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-button-list-item"
        :style="getStyle(data)"
        @click="changeData(data)"
      >{{data["显示字段"]}}</div>
    </div>
  </div>
  <div
    v-if="initializing"
    v-loading="true"
    element-loading-text=""
    style="min-height: 30px;"
  ></div>
</template>

<script setup>
import { ref, onMounted, inject, getCurrentInstance, nextTick, onUnmounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
  inputParam: Object
});

const initializing = ref(true);
const currNode = ref(props.node);
const currValue = ref('');
const compStyle = ref({});
const dataList = ref([]);
const gap = ref('');
const allName = ref('全部');
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  compStyle.value = currNode.value.currCompStyle || {};
  gap.value = compStyle.value['gap'];
  allName.value = compStyle.value['allName'];
  await nextTick(() => initializing.value = false);
};

const loadValue = async(useGlobal) => {
  currValue.value = await visual.loadValue(currNode.value, eventHandler, useGlobal) || '';
};

const loadDataList = tool.debounce(async() => {
  dataList.value = (await visual.loadData(
    currNode.value.compData,
    eventHandler,
    getData(),
    currNode.value) || {}).data || [];
});

const getStyle = (data) => {
  const prefix = currValue.value === (data['传值字段'] || '') ? 'selected.' : '';
  const styleList = compStyle.value[prefix + 'styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
};

const changeData = (data) => {
  if (currValue.value === (data['传值字段'] || '') + '') return;
  currValue.value = (data['传值字段'] || '') + '';
  eventHandler.trigger('点击条目事件', data);
};

const getData = () => {
  return {
    value: currValue.value || '',
    inputParam: currNode.value.inputParam || {}
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  initializing.value = true;
  await loadValue(false);
  loadDataList();
  await nextTick(() => initializing.value = false);
};

onMounted(async() => {
  await init();
  await loadValue(true);
  loadDataList();
  await eventHandler.trigger('初始化事件');
});

onUnmounted(() => {
  eventHandler.unregister();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-button-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>